<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>lb</title>
        <link rel="stylesheet" href="lb.css"/>

    </head>
    <body>



        <div class="div1" id="div_1" onmouseover="mouseOver()" onmouseout="mouseOut()">
            <div class="div2" id="div_2">
               <span class="span1"><</span>
            </div>
            <img src="./imgs/1.jpg" alt="图片未加载"/>
            <img src="./imgs/2.jpg" alt="图片未加载"/>
            <img src="./imgs/3.jpg" alt="图片未加载"/>
            <img src="./imgs/4.jpg" alt="图片未加载"/>

            <div class="div3" id="div_3">
                <span class="span1">></span>
            </div>

        </div>

        <script>
//  自动轮播
            var rr = 0;
            var aa = 3;
            var bb=document.getElementsByClassName("div1")[0].getElementsByTagName("img");
            var but_right = document.getElementById("div_3");
            var but_left = document.getElementById("div_2");

            //向右
            function right_img(){
                aa++;
                if(aa > 3){
                    aa=0;
                }
                for(var i=0;i<bb.length;i++){
                    if(i==aa){
                        bb[aa].style.opacity="1";
                        bb[aa].style.display="inline-block";
                    }else{
                        bb[i].style.display="none";
                    }
                }
            }
            but_right.addEventListener("click",right_img);

            function run(){
                rr =setInterval(right_img,2000);
            }
            run();
        //向左
        function left_img(){
            aa--;
            if(aa < 0){
                aa=3;
            }
            for(var i=0;i<bb.length;i++){
                if(i==aa){
                    bb[aa].style.display="inline-block";
                }else{
                    bb[i].style.display="none";
                }
            }

        }
            but_left.addEventListener("click",left_img);

//移入暂停
            function mouseOver(){
                clearInterval(rr);
            }
            function mouseOut(){
                run();
            }

        </script>
    </body>
</html>